<template>
  <Card title="项目明细(静态数据)" class="enter-y">
    <div ref="chartRef" style="height:300px; width:100%"></div>
  </Card>
</template>

<script lang="ts">
import { Card } from 'ant-design-vue';
import { defineComponent, ref, Ref, watch, } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

export default defineComponent({
  components: { Card },
  props: {
    loading: Boolean,
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    console.log('setup->setOptions');
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      legend: {
        data: ['完成项目', '新项目', '进行中项目']
      },
      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
      xAxis: {
        type: 'category',
        data: [
          '委托检测',
          '职业卫生',
          '类型3',
          '类型4',
          '类型5',
          '类型6',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '完成项目',
          data: [3200, 2100, 3000, 5100, 6000, 3200,],
          type: 'bar',
          barMaxWidth: 80,
        },
        {
          name: '新项目',
          data: [3000, 2000, 3333, 5000, 3200, 4200,],
          type: 'bar',
          barMaxWidth: 80,
        },
        {
          name: '进行中项目',
          data: [3333, 5000, 3200, 3200, 2100, 3000,],
          type: 'bar',
          barMaxWidth: 80,
        },
      ],
    });
    //end to set options


    watch(
      () => props.loading,
      () => {
        if (props.loading) {
          //return;
        }
        //begin to set options



      },
      { immediate: true }
    );

    return { chartRef };
  }
});



</script>
